<template>
  <div v-loading="loading" class="page-wrapper">
    <c-card title="报修列表" class="user-list">
      <!-- <el-button slot="func" size="small" class="item" @click="showAddDlg">添加</el-button> -->
      <!-- <div class="options row">
        <c-search
          v-model="searchText"
          :width="200"
          placeholder="用户名搜索"
          class="item"
          @submit="_getList"
        />
      </div>-->
      <el-table ref="table" :data="list" stripe style="width: 100%">
        <el-table-column prop="userName" label="用户名" show-overflow-tooltip></el-table-column>
        <el-table-column prop="clientName" label="公司名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="rqstTime" label="报修时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="doneTime" label="处理时间" show-overflow-tooltip></el-table-column>
        <el-table-column label="状态">
          <template v-slot="{ row }">
            <el-button
              type="text"
              :disabled="!!row.blnProcess"
              @click="processOrder(row)"
            >{{ !!row.blnProcess ? "已处理" : "处理" }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          layout="prev, pager, next"
          :page-size="page.size"
          :current-page.sync="page.index"
          :total="page.total"
          @current-change="_getList"
        ></el-pagination>
      </div>
    </c-card>
  </div>
</template>

<script>
import CCard from "@/components/CCard";
import { calcPageNum } from "@/utils";
import { getReports, ProcessReport } from "@/api/serv";
export default {
  name: "Users",
  components: {
    CCard
  },
  data() {
    return {
      loading: false,
      page: {
        index: 1,
        size: 10,
        total: 0
      },
      list: null
    };
  },
  computed: {
    comList() {
      return this.$store.getters.comList;
    }
  },
  watch: {
    "page.index"(v) {
      const path = this.$route.path;
      this.$router.push(path + "?page=" + v);
    }
  },
  mounted() {
    const h = this.$refs["table"].$el.clientHeight;
    const n = calcPageNum(h);
    this.$set(this.page, "size", n);

    const page = parseInt(this.$route.query.page || 1);
    this.$set(this.page, "index", page);
    this.loading = true;
    this._getList().then(() => {
      this.loading = false;
    });
  },
  methods: {
    _getList() {
      const params = {
        pageNo: this.page.index,
        pageSize: this.page.size
      };
      return getReports(params)
        .then(data => {
          this.$set(this.page, "total", data.total);
          this.list = data.rows;
        })
        .catch(e => {
          this.$message.error(e);
        });
    },
    processOrder(row) {
      this.$confirm("该操作不可逆, 确认处理?", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "success"
      })
        .then(() => {
          const load = this.$loading();
          const params = {
            pkid: row.pkid,
            workOrderId: row.processid
          };
          ProcessReport(params)
            .then(() => {
              this._getList();
            })
            .catch(e => this.$message.error(e))
            .finally(() => load.close());
        })
        .catch();
    }
  }
};
</script>

<style lang="scss" scoped>
.main-container {
  height: 100%;
}
.options {
  display: flex;
  .item {
    margin-left: 20px;
    &:nth-child(1) {
      margin-left: 0;
    }
  }
}
.el-form {
  width: 700px;
}
</style>
